<template>
  <div class="dialog_news">
    <el-row>
      <el-col :span="8"><el-input v-model="wd" size="small"></el-input></el-col>
      <el-col :span="4" style="margin-left:10px;"><el-button type="primary" size="small" @click="init">搜索</el-button></el-col>
    </el-row>
    <div class="newsBox">
      <div v-for="item,n in newsList.list" class="newsItem" @click="handleSelect(item)">
        <div class="itemInner">
          <div class="firstNews">
            <h4 class="title">{{item.newsList[0].title}}</h4>
            <img :src="baseUrl + '/content/source/id/' + item.newsList[0].sourceId" alt="">
          </div>
          <div v-if="n!=0" v-for="item,n in item.newsList" class="subNews">
            <img :src="baseUrl + '/content/source/id/' + item.sourceId" alt="">
            <h4 class="title">{{item.title}}</h4>
          </div>
        </div>
        <div class="mask" v-if="item.id==selected.id"><i class="el-icon-check"></i></div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        :page-size.sync="size"
        layout="total, prev, pager, next, jumper"
        :total="newsList.page.total"
        @current-change="init()">
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import {mapState, mapActions} from 'vuex'
  import config from '@/config/env'
  export default {
    data () {
      return {
        wd: null,
        selected: {},
        page: 1,
        size: 9
      }
    },
    mounted () {
      this.init()
    },
    computed: {
      ...mapState({
        newsList: state => state.contentManage.wxNewsList
      }),
      baseUrl () {
        return config.baseUrl
      }
    },
    methods: {
      ...mapActions(['getWxNewsList']),
      init () {
        this.getWxNewsList({
          wd: this.wd,
          page: this.page,
          size: this.size
        })
      },
      handleSelect (item) {
        if (this.selected.id !== item.id) {
          this.selected = item
        } else {
          this.selected = {}
        }
      }
    }
  }
</script>
<style lang="scss">
  .dialog_news{
    .newsBox{margin-top:15px;display:flex;flex-wrap:wrap;justify-content: space-between;}
    .newsItem{
      &{position:relative;margin-bottom:10px;width:260px;height:255px;border:1px solid #d3dce6;cursor:pointer;}
      .firstNews img{margin-top:5px;width:240px;height:134px;}
      .subNews{margin-top:5px;text-align:right;overflow:hidden;}
      .subNews img{float:right;width:80px;height:80px;}
      .subNews .title{margin-right:90px;}
      .title{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
      .itemInner{
        &{padding:5px 10px;width:240px;height:245px;overflow-y:auto;}
        &::-webkit-scrollbar-track-piece{width:10px;background-color:#fff;}
        &::-webkit-scrollbar{width:6px;height:6px;}
        &::-webkit-scrollbar-thumb{height:50px;background:#ccc;cursor:pointer;}
        &::-webkit-scrollbar-thumb:hover{background:#ccc;cursor:pointer}
      }
      .mask{position:absolute;top:0;left:0;right:0;bottom:0;padding-top:100px;background:rgba(0,0,0,.6);font-size:30px;color:#fff;text-align:center;}
    }
    .el-button{margin-top: 0;}
  }
</style>
